import {h, createTextVnode} from "../../lib/guide-mini-vue.esm.js";
import {Foo} from './Foo.js'

/**
 *
 * 如果说Vue是一个类似MVVM的框架,那么是否可以说setup 函数一侧连着model(数据),render函数一侧连着View(视图)?
 */

// 通过 windows.self这个变量来保存render执行时的this,来方便调试

export const App = {
    name: "App", render() {
        const app = h("div", {name: "app组件"}, "App");
        const foo = h(Foo, {name: "foo组件"}, {
            header: ({age}) => [h('p', {name: "header组件"}, "插槽头部" + age), createTextVnode("文本节点")],
            footer: () => h('p', {name: "footer组件"}, "插槽底部")
        });
        return h("div", {}, [app, foo])
    }, setup() {
        return {}
    }
}